<%-- 
    Document   : cart
    Created on : Mar 25, 2012, 12:17:11 PM
    Author     : User
--%>
<%@page import="java.text.DecimalFormat"%>
<%@page import="com.mfi.models.*"%>
<%@page import="java.util.ArrayList"%>
<%! ArrayList<CartItem> cartItems;
    double total = 0, delivery = 0;
    DecimalFormat formatter = new DecimalFormat("###,##0.00");
%>
<%
    total = 0; delivery = 0;
    if (request.getSession().getAttribute("cart") != null) {
        cartItems = (ArrayList) request.getSession().getAttribute("cart");
        for (CartItem c : cartItems) {
            total += c.total();
        }
        delivery = total * 0.05;
    } else {
        cartItems = new ArrayList<CartItem>();
    }%>

<!--<div class="cart-div">-->
    <table width="100%" class="cart-item-table">
        <% if (cartItems.size() > 0) {
                int counter = 0;
                for (CartItem c : cartItems) {%>
        <tr class="cart-row_<%= c.getId() + "_" + c.getSize() %>">
            <td align="left"><%= c.getQty()%> x <%= c.getName().length() > 17 ? c.getName().substring(0, 15) + "..." : c.getName() %></td>
            <td align="right">Php <%= formatter.format(c.total())%></td>
            <td><a class="remove-to-cart-btn_<%= c.getId() %>" href="javascript:void" rel="<%= c.getSize() %>"><img src="/images/delete_icon.png" width="12" height="12" /></a></td>
        </tr>
        <% counter++; }} %>
        <tr class="cart-empty">
            <td colspan="3">Empty</span></td>
        </tr>
    </table>
    <table width="100%" class="cart-info-table">
        <tr>
            <td>Sub Total</td>
            <td align="right">Php <span class="subtotal"><%= formatter.format(total)%></span></td>
        </tr>
        <tr>
            <td>Delivery</td>
            <td align="right">Php <span class="delivery"><%= formatter.format(delivery)%></span></td>
        </tr>
        <tr>
            <td>Total</td>
            <td align="right">Php <span class="total"><%= formatter.format(total + delivery)%></span></td>
        </tr>
    </table>

    <% if (total > 0) {%>
    <a class="checkout-button" href="/order/checkout/summary">Checkout!</a>
    <% }%>
<!--</div>-->
<script type="text/javascript">
    $(document).ready(function() {        
        
        emptyCart();
        
        $('[class^=remove-to-cart-btn_]').click(function() {
            var item = $(this).attr('class').replace('remove-to-cart-btn_', '');
            var size = $(this).attr('rel');
                    
            $.post('/order/remove', {
                id: item,
                size: size
            }, function(data) {
                if (data.success) {
                    $('.cart-row_' + item + '_' + size).fadeOut(200, function() {
                       $(this).remove();
                       emptyCart();
                    });
                    
                } else {
                    location.href=data.redirect;
                }
            }, 'json');
                
            return false;
        });
        
        function emptyCart() {
            var count = $('.cart-item-table tr').length - 1;
            if(count > 0) {
                $('.cart-empty').hide();
                $('.checkout-button').slideDown();
            } else {
                $('.cart-empty').show();
                $('span.total, span.subtotal, span.delivery').html("0");
                $('.checkout-button').hide();
            }
            
            return;
        }
    });
    
</script>